<template>
  <jl-base>
    <jl-header>
      <mt-header title="新增合同" :fixed="true">
        <i slot="left">
          <mt-button icon="back" @click="back"></mt-button>
        </i>
      </mt-header>

      <mt-navbar v-model="selected" class="mt35">
        <mt-tab-item id="base">基本信息</mt-tab-item>
        <mt-tab-item id="goods">商品信息</mt-tab-item>
      </mt-navbar>
    </jl-header>

    <jl-content style="height: calc(100% - 90px);!important;margin-top: 0;">
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="base">
          <div class="w12">
            <div class="dld_body mt10">
              <!--      <jl-from-search label="选择登录单" :text="formData.GCDLD01" required
                                    type="interface"
                                    sqlid="app.engineer.queryStartOrderByContract"
                                    resultName="startOrder"
                                    @ok="chooseStartOrder"
                                    :params="formData"
                                    title="查询登录单"
                                    placeholder="输入使用单位等，可模糊搜索">
                      <div class='jl_form'>
                        <div class='jl_form_item bor_bottom'>
                          <span class='w04 '>
                            {DLD01}
                          </span>
                          <span class='w08 tr'>
                            {JXSMC}
                          </span>
                          <span class='w12 font_size_small'>
                            {SYDW}
                          </span>
                          <span class='w12 font_size_small'>
                            {YHDH}
                          </span>
                          <i class='fa fa-angle-right'></i>
                        </div>
                      </div>
                    </jl-from-search>-->
              <jl-from-input label="登录单" disabled v-model="formData.GCDLD01"/>
              <jl-from-input label="使用单位" disabled v-model="formData.SYDW"></jl-from-input>

              <jl-from-datepicker label="合同签订日期" required v-model="formData.HTQDRQ"/>
              <jl-from-datepicker label="预计完工日期" required v-model="formData.YJWGRQ"/>

              <jl-from-input label="联系人" disabled v-model="formData.YHXM"></jl-from-input>
              <jl-from-input label="联系电话" disabled v-model="formData.YHDH"></jl-from-input>

              <jl-images upload required label="上传附件" v-model="formData.HTSCFJ"/>

              <jl-images upload label="现场图片" v-model="formData.BCXCTP"/>

              <jl-from-textarea placeholder="请输入工程描述。" v-model="formData.GCMS"/>
            </div>
          </div>

          <jl-from-select label="是否奖励" :options="{'0': '是', '1': '否'}" default-key="1" v-model="formData.SFJL"/>

          <jl-from-select label="是否特殊工程" :options="{'0': '是', '1': '否'}" default-key="1" v-model="formData.SFTSGC"/>

          <jl-from-select label="审批等级"
                          :options="{'0': '一般审批', '1': '加急审批'}"
                          default-key="0"
                          v-model="formData.SPDJ"/>

        </mt-tab-container-item>
      </mt-tab-container>

      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="goods">
          <div class="mb10"></div>
          <template v-for="item in formData.SPLB">
            {{item.show}}
            <div class="jl_form bgcolor_white mb10" @click="cli(item)">
              <div class="jl_form_item">
                <span class="w12">{{item.GCSPMC}}</span>
                <span class="w12 mt10 font_size_standard font_gray"><i
                  class="fa fa-map-marker mr5"></i>{{item.AZDZ}}</span>
                <span class="w12 mt10 font_size_standard font_red">小计：<font>合同数量：{{item.SQSL}}</font><font class="ml20">合同金额：{{item.SQJE|money}}</font></span>
                <i class="fa fa-angle-right"></i>
              </div>
            </div>
            <mt-popup style="height: 100%;width: 100%"
                      v-model="item.edit_show"
                      modal="false"
                      position="right">
              <goods-edit :goods="item" :order-info="formData" v-if="item.edit_show" @back="$forceUpdate()"/>
            </mt-popup>
          </template>
        </mt-tab-container-item>
      </mt-tab-container>

    </jl-content>

    <jl-footer>
      <div class="dld_title font_red" style="background-color: #f1f1f1" v-if="selected == 'goods'">
        <span>合计：{{formData.SPLB.length}}件商品，{{sumAmt | money}}元。</span>
      </div>
      <div class="footer_btn">
        <!--<button class="none">保存草稿</button>-->
        <button @click="save" style="width: 90vw; !important;">提交</button>
      </div>
    </jl-footer>
  </jl-base>
</template>

<script>
  import GoodsEdit from './ContractGoodsEdit'

  export default {
    name: 'new',
    components: {GoodsEdit},
    data() {
      return {
        selected: 'base',
        edit_show: false,
        sumAmt: 0,
        formData: {
          bdbh: '1095',
          jlbh: 0,
          BZ01: '90921',
          GCDLD01: '',
          YHXM: '',
          YHDH: '',
          HTQDRQ: '',
          GCMS: '',
          SPLB: [],
          HTSCFJ: [],
          BCXCTP: [],
          SFJL: {},
          SFTSGC: {},
          YJWGRQ: '',
        }
      }
    },
    methods: {
      back() {
        this.$router.back()
      },
      queryStartOrder() {
        return this.http.post('/api/SelectGCDLD/getGCHT.do', {XmlData: JSON.stringify({})})
      },
      chooseStartOrder() {
        this.http.find('SCM_GCDLD', {
          jlbh: this.formData.jlbh,
          bdbh: this.formData.bdbh
        }).then(v => {
          let data = v[0]

          if (data) {
            this.formData['DLD_DATA'] = {...{}, ...data}
            delete data['BZ01']
            data['jlbh'] = 0
            data['bdbh'] = '1095'
            Object.assign(this.formData, data)

          }
        })
      },
      save() {
        $Utils.MessageBox.confirm('确定执行此操作?').then(action => {
          $Utils.loading()
          this.$engineer.contractSave(this.formData).then(v => {
            $Utils.hideloading()
            this.back()
          }).catch(e => {
            $Utils.hideloading()
          })
        }).catch(e => {
        })
      },
      cli(item) {
        item.edit_show = true;
        this.$forceUpdate();
      },
    },
    watch: {
      'formData.SPLB': {
        handler(val, oldVal) {
          this.sumAmt = 0
          for (let i = 0; i < val.length; i++) {
            let item = val[i]
            this.sumAmt += (item.SQJE || 0)
          }
        },
        immediate: true
      },
    },
    created() {
      if (!$Utils.isNull(this.$route.params.item)) {
        this.formData.jlbh = new Number(this.$route.params.item['JLBH']);
        this.formData.bdbh = this.$route.params.item['BDBH'];
        this.chooseStartOrder();
      }
    }
  }
</script>

<style scoped>

</style>
